<!--#
layout("/layouts/platform.html"){
#-->
<script src="${base!}/assets/platform/plugins/echarts/echarts.min.js"></script>
<style>

    .box-card{
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 5px;
    }
    .box-card .countHeader{
        color: #9fadbd;
    }
    .box-card .countContent{
        font-size: 30px;width: 100%;text-align: center
    }
    .box-card .countSpan{
        font-size: 14px
    }
</style>
<div id="app" v-cloak>
    <el-row >
        <el-col :span="6" v-for="(item,index) in countTableData">
            <el-card class="box-card">
                <div >
                    <div class="countHeader">{{item.name}}：</div>
                    <div ><el-link :type="item.countLink" :underline="false" class="countContent" @click="doCountTypeSearch(item.date,item.dyzt,index)">{{item.count}} <span class="countSpan">份</span></el-link></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row >
        <el-row >
                <p style="text-align: center;">{{typeTitle}}</p>
        </el-row>
        <el-row >
            <el-col :span="8">
                <el-table :data="countTypeTableData"  border size="small"  header-align="center" >
                    <el-table-column sortable="custom"  prop="name"  label="项目类型"   header-align="center" align="center"show-overflow-tooltip></el-table-column>
                    <el-table-column  sortable="custom" prop="count" label="数量"  width="100" header-align="center" align="center"show-overflow-tooltip></el-table-column>
                </el-table>
            </el-col>
            <el-col :span="16">
                <div id="chartAll" style="width:100%;height:300px;"></div>
            </el-col>
        </el-row>
    </el-row>
    <el-divider></el-divider>
    <el-row >
        <el-row >
            <p style="text-align: center;">历年样品受理数量统计</p>
        </el-row>
        <el-row >
                <div id="monthAll" style="width:100%;height:300px;"></div>
        </el-row>
    </el-row>

</div>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                showDialog: false,
                loading: false,
                countTableData:[],
                countTypeTableData:[],
                typeTitle:"累计提交样品类型统计",
                tableAllMonthData:[]
            }
        },
        methods: {
            open:function () {
                this.showDialog=true
            },
            doCountSearch(){
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/home/countData", {date:"${nowDay}"}, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.countTableData = data.data;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doCountTypeSearch(date,dyzt,index){
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/home/countTypeData", {date:date,dyzt:dyzt}, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.countTypeTableData = data.data;
                        self.getALLEchartData();
                        self.countTableData.forEach((item,i)=>{
                            if(i==index){
                                item.countLink="primary"
                                if(item.date=='all'){
                                    self.typeTitle=item.name+"类型统计"
                                }else{
                                    self.typeTitle="("+item.date+")"+item.name+"类型统计"
                                }
                            }else{
                                item.countLink=""
                            }
                        })

                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            getALLEchartData() {
                var self = this;
                const chart = document.getElementById("chartAll");
                if (chart) {
                    const option = {
                        title: {
                            text: "", // 主标题文本
                            subtext: "", // 副标题文本
                            left: 'center', // 标题水平位置
                        },
                        //放置在option中
                        legend: {
                            orient: "vertical",//改变文字颜色的xy轴排列方式
                            icon:'circle',data: ["受理量统计"],
                            x:'right',      //可设定图例在左、右、居中
                            y:'top',     //可设定图例在上、下、居中
                            top:'10%',left:'85%',textStyle:{color:"#fff"},
                            align:"left", //改变 legend 文字和颜色位置
                        },
                        tooltip: {},
                        dataset: {source: []},
                        xAxis: {
                            type: 'category',// 网格线颜色更改
                            splitLine: {show: true,lineStyle:{color: ['#E6E6E6'],width: 1,type: 'solid'//网格线类型
                                }}
                        },
                        yAxis: {},
                        axisLine:{lineStyle:{color:'#fff',width:1,//这里是为了突出显示加上的
                            }},
                        series: [
                            {type: 'bar',// 修改柱状图颜色
                                itemStyle: {normal: {color: "#40C2FF",//更改颜色
                                        barBorderRadius: [25, 25, 0, 0]// 将立方体改成圆柱
                                    }},barWidth: 15,// 修改柱状图宽度
                            }
                        ]
                    }
                    //chart.style.width = option.clientWidth + "px";
                    const tables = JSON.parse(JSON.stringify(self.countTypeTableData))
                    tables.forEach((item)=>{
                        option.dataset.source.push([item.name, item.count]);
                    })
                    self.echartCt = echarts.init(chart)
                    self.echartCt.setOption(option)
                }
            },
            getAllMonthCont: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/reports/acceptance/allData", {date:'',type:'month'}, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableAllMonthData = data.data;
                        self.getMonthCountEchartData();
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            getMonthCountEchartData() {
                var self = this;
                const chart = document.getElementById("monthAll");
                if (chart) {
                    const option = {
                        title: {
                            text: "", // 主标题文本
                            subtext:"", // 副标题文本
                            left: 'center', // 标题水平位置
                        },
                        //放置在option中
                        legend: {
                            orient: "vertical",//改变文字颜色的xy轴排列方式
                            icon:'circle',data: ["历年样品受理数量统计"],
                            x:'right',      //可设定图例在左、右、居中
                            y:'top',     //可设定图例在上、下、居中
                            top:'10%',left:'85%',textStyle:{color:"#fff"},
                            align:"left", //改变 legend 文字和颜色位置
                        },
                        tooltip: {},
                        dataset: {source: []},
                        xAxis: {
                            type: 'category',
                        },
                        yAxis: {},
                        axisLine:{lineStyle:{color:'#fff',width:1,//这里是为了突出显示加上的
                            }},
                        series: [
                            {type: 'line',itemStyle: {normal: {color: "#40C2FF",}}
                            }
                        ]
                    }
                    option.dataZoom = {
                        type:"slider",//slider表示有滑动块的，
                        show:true,
                        xAxisIndex:[0],//表示x轴折叠
                        start:1,//数据窗口范围的起始百分比,表示1%
                        end:100,//数据窗口范围的结束百分比,表示35%坐标
                        bottom:"20",
                    }
                    self.tableAllMonthData.reverse().forEach((item)=>{
                        option.dataset.source.push([item.year, item.count]);
                    })
                    self.echartCt = echarts.init(chart)
                    self.echartCt.setOption(option)
                }
            }
        },
        mounted: function () {
            this.doCountSearch();
            this.$nextTick(function () {
                this.doCountTypeSearch("all","",3);
                this.getAllMonthCont();
            })
        }
    })
</script>
<style scoped>
</style>


<!--# } #-->
